<template>
<div>
  <div>
    <!--搜索部门筛选表单-->
    <el-form :inline="true">
      <!--部门搜索输入框-->
      <el-form-item prop="searchHospital">
        <el-input v-model="hospital" suffix-icon="el-icon-search" placeholder="请输入医疗机构名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <!--搜索按钮-->
        <el-button type="primary" icon="el-icon-search" @click="load">搜索</el-button>
        <!--新增部门按钮-->
        <el-button type="primary" icon="el-icon-plus" @click="add()">新增医疗机构</el-button>
      </el-form-item>
    </el-form>

    <!--部门列表表格-->
    <el-table :data="tableData" :max-height="tableHeight">
      <!--表头-->
      <el-table-column type="index" width="40" align="center"></el-table-column>
      <el-table-column prop="hcode" label="机构编码" align="center"></el-table-column>
      <el-table-column prop="hospital" label="机构名称" align="center"></el-table-column>
      <el-table-column prop="hrank" label="医院等级" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <div class="operation_show" slot-scope="scope">
          <!--对当前行进行编辑操作按钮-->
          <el-button type="success" icon="el-icon-edit" @click="edit(scope.row.hcode)">编辑</el-button>
          <!--删除当前行按钮-->
          <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="del(scope.row.hcode)"
          >
            <el-button type="danger" icon="el-icon-delete" slot="reference" style="margin-left:10px">删除</el-button>
          </el-popconfirm>
        </div>
      </el-table-column>
    </el-table>

    <!--分页块-->
    <div>
      <el-pagination
          style="margin-top: 10px"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[10,20,30,40,50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!--新增医疗机构信息对话框-->
    <el-dialog title="医疗机构信息" :visible.sync="addFormVisible" width="30%" >
      <!--新增医疗机构信息表单-->
      <el-form label-width="110px">

        <el-form-item label="医疗机构编码：">
          <el-input v-model="addForm.hcode" placeholder="请输入医疗机构唯一编码" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--部门名称输入框-->
        <el-form-item label="医疗机构名称：">
          <el-input v-model="addForm.hospital" placeholder="请输入医疗机构名称" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--医疗机构代码输入框-->
        <el-form-item label="医院等级：">
          <el-input v-model="addForm.hrank" placeholder="请输入医院等级" clearable autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--新增部门信息对话框按钮-->
      <div slot="footer" class="dialog_footer">
        <!--关闭对话框按钮-->
        <el-button @click="addFormVisible = false" type="danger">取消</el-button>
        <!--保存信息按钮-->
        <el-button type="primary" @click="saveAdd">保存</el-button>
      </div>
    </el-dialog>

    <!--编辑部门信息对话框-->
    <el-dialog title="医疗机构信息" :visible.sync="editFormVisible" width="30%">
      <!--编辑部门信息表单-->
      <el-form label-width="110px">
        <!--新部门名称输入框-->
        <el-form-item label="医疗机构名称：">
          <el-input v-model="editForm.hospital" placeholder="请输入新医疗机构名称" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--新部门代码输入框-->
        <el-form-item label="医院等级：">
          <el-input v-model="editForm.hrank" placeholder="请输入新医院等级" clearable autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--编辑部门信息对话框按钮-->
      <div slot="footer" class="dialog_footer">
        <!--关闭对话框按钮-->
        <el-button @click="editFormVisible = false" type="danger">取消</el-button>
        <!--保存信息按钮-->
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>

  </div>
</div>
</template>

<script>
export default {
  name: "HospitalList",
  data(){
    return{
      tableData:[],
      total:0,
      pagenum:1,
      pagesize:10,
      hospital:'',
      addFormVisible:false,
      addForm:{},
      editFormVisible:false,
      editForm:{},
      hospitalname: "",
      tableHeight:""
    }
  },
  created() {
    this.load()     //网页创建时加载数据
    this.getTableHeight();    //网页创建时获得表格高度
  },
  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  methods:{
    getTableHeight() {
      let tableH = 206; //距离浏览器底部的距离
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    handleSizeChange(pagesize) {   //每页条数改变时触发
      console.log(pagesize)
      this.pagesize = pagesize
      this.load()
    },
    handleCurrentChange(pagenum) {   //当前页码改变时触发
      console.log(pagenum)
      this.pagenum = pagenum
      this.load()
    },
    add(){
      this.addForm = {}  //每次打开新增用户对话框时清空表单数据，这样不会保留上次填写时留下的数据
      this.addFormVisible = true  //显示新增部门信息表单对话框
    },

    //显示编辑部门信息表单对话框
    edit(hcode){
      this.editForm = {}
      this.editForm.hcode = hcode  //打开编辑用户信息对话框时传当前数据给表单但不显示
      this.editFormVisible =true //显示编辑部门信息表单对话框
    },
    //搜索或刷新功能
    load(){
      this.request.get("/hospital/hospitalPage",{params: {
          pagenum: this.pagenum,
          pagesize: this.pagesize,
          hospital: this.hospital
        }})
          .then(res=>{
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          })
    },

    //新增功能
    saveAdd(){
      this.request.post('/hospital/addHospital', this.addForm).then(res=>{
        if (res.data.code === '200'){
          this.$message.success("新建医疗机构成功")
          this.addFormVisible = false
          this.load()
        }
        else
          this.$message.error(res.data.msg)
      })
    },

    //编辑功能
    saveEdit(){
      if (this.editForm.hospital === '' ||this.editForm.rank === '')
        this.$message.error("更新信息不能为空")
      else {
        this.request.post('/hospital/editHospital', this.editForm).then(res=>{
          if (res.data.code === '200'){
            this.$message.success("更改部门信息成功")
            this.load()
          }
          else
            this.$message.error(res.data.msg)
        })
      }
    },

    del(hcode){
      this.request.delete("/hospital/deleteHospital/" + hcode).then(res =>{  //通过当前行id来进行删除
        if(res.data.code === '200'){
          this.$message.success("删除成功")
          this.load()
        }else{
          this.$message.error(res.data.msg)
        }
      })
    },
  }
}
</script>

<style scoped>
  .operation_show{
    display: none;
  }
  .el-table__body tr:hover > td .operation_show{
    display: block;
  }
</style>